<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>销售额统计表</title>
<link rel="stylesheet" type="text/css"
	href="${basePath}static/main/css/style.css">
<link rel="stylesheet" type="text/css"
	href="${basePath}static/main/css/welcome.css">

<script src="${basePath}static/main/js/jquery.js"></script>
<style type="text/css">
.dataStatistic {
	width: 400px;
	height: 200px;
	border: 1px solid #ccc;
	margin: 0 auto;
	float: left;
	margin-top: 100px;
	overflow: hidden"
}
</style>
<script
	src="${basePath}static/main/js/jquery.mCustomScrollbar.concat.min.js"></script>
</head>

<body>
	<!--开始：以下内容则可删除，仅为素材引用参考   (Welcome to the lenovo management system)-- >

			
	<!--统计图-->
	<div>
		<h1
			style="color: black; font-size: 35px; font-weight: bold; text-align: center; margin-left:-230px">
			联想手机销售额统计表</h1>

		<section style="overflow: hidden; margin-left:50px">
			<!--柱状图-->
			<div class="dataStatistic">
				<div id="cylindrical"></div>
			</div>
			<!--线性图-->
			<div class="dataStatistic">
				<div id="line"></div>
			</div>
			<!--饼状图-->
			<div class="dataStatistic">
				<div id="pie"></div>
			</div>
		</section>
	</div>



	<script src="${basePath}static/main/js/amcharts.js"
		type="text/javascript"></script>
	<script src="${basePath}static/main/js/serial.js"
		type="text/javascript"></script>
	<script src="${basePath}static/main/js/pie.js" type="text/javascript"></script>
	<script type="text/javascript">
		$(document).ready(function(e) {
			GetSerialChart();
			MakeChart(json);
		});
		var json = [ {
			"name" : "6月",
			"value" : "35"
		}, {
			"name" : "7月",
			"value" : "60"
		}, {
			"name" : "8月",
			"value" : "22"
		}, {
			"name" : "9月",
			"value" : "65"
		}, {
			"name" : "10月",
			"value" : "35"
		}, {
			"name" : "11月",
			"value" : "22"
		}, {
			"name" : "12月",
			"value" : "43"
		}, {
			"name" : "1月",
			"value" : "55"
		} ]
		//柱状图  
		function GetSerialChart() {

			chart = new AmCharts.AmSerialChart();
			chart.dataProvider = json;
			//json数据的key  
			chart.categoryField = "name";
			//不选择      
			chart.rotate = false;
			//值越大柱状图面积越大  
			chart.depth3D = 20;
			//柱子旋转角度角度
			chart.angle = 30;
			var mCtCategoryAxis = chart.categoryAxis;
			mCtCategoryAxis.axisColor = "#efefef";
			//背景颜色透明度
			mCtCategoryAxis.fillAlpha = 0.5;
			//背景边框线透明度
			mCtCategoryAxis.gridAlpha = 0;
			mCtCategoryAxis.fillColor = "#efefef";
			var valueAxis = new AmCharts.ValueAxis();
			//左边刻度线颜色  
			valueAxis.axisColor = "#ccc";
			//标题
			valueAxis.title = "6~12月联想手机销售(万)";
			//刻度线透明度
			valueAxis.gridAlpha = 0.2;
			chart.addValueAxis(valueAxis);
			var graph = new AmCharts.AmGraph();
			graph.title = "value";
			graph.valueField = "value";
			graph.type = "column";
			//鼠标移入提示信息
			graph.balloonText = "测试数据[[category]] [[value]]";
			//边框透明度
			graph.lineAlpha = 0.3;
			//填充颜色 
			graph.fillColors = "#b9121b";
			graph.fillAlphas = 1;

			chart.addGraph(graph);

			// CURSOR
			var chartCursor = new AmCharts.ChartCursor();
			chartCursor.cursorAlpha = 0;
			chartCursor.zoomable = false;
			chartCursor.categoryBalloonEnabled = false;
			chart.addChartCursor(chartCursor);

			chart.creditsPosition = "top-right";

			//显示在Main div中
			chart.write("cylindrical");
		}
		//折线图
		AmCharts.ready(function() {
			var chart = new AmCharts.AmSerialChart();
			chart.dataProvider = json;
			chart.categoryField = "name";
			chart.angle = 30;
			chart.depth3D = 20;
			//标题
			chart.addTitle("8个月具体销售额(万)", 15);
			var graph = new AmCharts.AmGraph();
			chart.addGraph(graph);
			graph.valueField = "value";
			//背景颜色透明度
			graph.fillAlphas = 0.3;
			//类型
			graph.type = "line";
			//圆角
			graph.bullet = "round";
			//线颜色
			graph.lineColor = "#8e3e1f";
			//提示信息
			graph.balloonText = "[[name]]: [[value]]";
			var categoryAxis = chart.categoryAxis;
			categoryAxis.autoGridCount = false;
			categoryAxis.gridCount = json.length;
			categoryAxis.gridPosition = "start";
			chart.write("line");
		});
		//饼图
		//根据json数据生成饼状图，并将饼状图显示到div中
		function MakeChart(value) {
			chartData = eval(value);
			//饼状图
			chart = new AmCharts.AmPieChart();
			chart.dataProvider = chartData;
			//标题数据
			chart.titleField = "name";
			//值数据
			chart.valueField = "value";
			//边框线颜色
			chart.outlineColor = "#fff";
			//边框线的透明度
			chart.outlineAlpha = .8;
			//标题
			chart.addTitle("不同地区每月销售统计", 15);
			//边框线的狂宽度
			chart.outlineThickness = 1;
			chart.depth3D = 20;
			chart.angle = 30;
			chart.write("pie");
		}
	</script>
</body>
</html>